<!DOCTYPE html>
<html lang="en">
<include file="./Application/Home/View/Layout/head.html" />

        <link href="__PUBLIC__/assets/bootstrap/css/select2.css" rel="stylesheet" />		
        <link href="__PUBLIC__/assets/bootstrap/css/jquery.dataTables.min.css" rel="stylesheet">
		<link href="__PUBLIC__/assets/bootstrap/css/bootstrap-datetimepicker.css" rel="stylesheet">
		<link href="__PUBLIC__/assets/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
		<link href="__PUBLIC__/assets/bootstrap/css/jquery.audioplayer.css" rel="stylesheet" />
<script type="text/javascript">
var SearchMode = "{$SearchMode}"
</script>
<style type="text/css">
     .Alertmessage{
    text-align: center;
    color: red;
 }
</style>
    <body>
  
        <block name="header">
           <include file="block/header"/>
        </block>
        <section>
            <div class="mainwrapper">
			   <block name="left">
			   <include file="block/left" />
               </block>
                
                <div class="mainpanel">
                    <div class="contentpanel">
                        <div class="panel panel-title-head">
                            <div class="search_banner">
                              <form id="form1" method="post" action="">
                                <div>
	                                <!-- <div class="pull-left col-md-1">
	                                    <h4 class="panel-title">录音查询</h4>
	                                </div> -->
	                                <div class="pull-left col-md-3">
	                                <div class="input-group" style="padding:5px;">
		                                <lable class="pull-left">开始时间：<input name="datetimepicker_start" id="datetimepicker_start" type="text" value="{$datetimepicker_start}" /></lable><br>
		                             </div>
		                             <div class="input-group" style="padding:5px;">
                                        <lable class="pull-left">结束时间：<input name="datetimepicker_end" id="datetimepicker_end" type="text" value="{$datetimepicker_end}" /></lable>                     
                                     </div>
	                                </div>
	                                <div class="pull-left col-md-3">
	                                 	<div class="input-group" style="padding:5px;">
		                                <lable class="pull-left">主叫号：<input name="v_caller" id="v_caller" type="text" value="{$v_caller}" /></lable>                     
	                                 </div>
                                     <div class="input-group" style="padding:5px;">
                                        <lable class="pull-left">被叫号：<input name="v_called" id="v_called" type="text" value="{$v_called}" /></lable>                     
                                     </div>
	                                </div>
	                                <div class="pull-left col-md-1">
		                                <div class="search_input_group">
										      <span class="search_input-group-addon">
										        <input name="SearchMode" value="0" type="checkbox" aria-label="..." <if condition="$SearchMode eq 0"> checked </if>>详细信息
										      </span>
									    </div><!-- /input-group -->
	                                </div>
	                                <div class="pull-left col-md-2">
	                                        <span class="btn btn-success btn-large" onclick="dayin()">打印</span>
											<div class="btn btn-info btn-large search">搜索</div>
	                                </div>
									<div class="pull-right col-md-3" style="text-align:right;" >
									     <div class="btn-group" > 
											<label class="btn btn-primary tongji-sel">
												图形统计
											</label> 
											<input type="hidden" name="tongji-sel-val" id="tongji-sel-val" value="0">
										</div>
									</div>
                                </div>
                                </form>
                                <div style="clear:both"></div>
                            </div><!-- panel-heading -->
                            <table id="basicTable" class="table table-striped table-bordered responsive">
                                <thead class="">
                                    <tr>
                                        <if condition="$SearchMode eq 0">
	                                        <th>通道号</th>
											<th>通道名称</th>
	                                        <th>主叫</th>
	                                        <th>被叫</th>
	                                        <th>录音号码</th>
	                                        <th>方向</th>
	                                        <th>录音/录像</th>
	                                        <th>开始时间</th>
	                                        <th>时长</th>
                                        <else/>
                                            <th>通道号</th>
											<th>通道名称</th>
	                                        <th>录音次数</th>
	                                        <th>录音时长</th>
	                                        <th>录像次数</th>
	                                        <th>录像时长</th>
                                        </if>
                                    </tr>
                                </thead>
                         
                                <tbody>
                                  
                                </tbody>
                            </table>
                        </div><!-- panel -->
                        
                        <div class="row tongji-show" style="display:none;">
						    
                            <div class="col-md-12"> 
                                <div id="container" style="min-width:600px; height:600px;"></div>
                            </div>
                        </div><!-- row -->
                            
                           
                        </div><!-- panel -->
                      
                        
                    </div><!-- contentpanel -->
                </div><!-- mainpanel --><!-- mainpanel -->
            </div><!-- mainwrapper -->


                    <!-- 告警模态框 -->
        <div class="modal fade" id="alertModel" tabindex="-1" role="dialog" aria-labelledby="myAlert">
          <div class="modal-dialog" role="document" style="width:450px">
            <div class="modal-content" >
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myAlert" style="text-align: center;">提示</h4>
              </div>
              <div class="modal-body">
                <div class="inner">
                    <h4 class="Alertmessage"> </h4>
                </div>
                
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                <!-- <button type="button" class="btn btn-primary">确定</button> -->
              </div>
            </div>
          </div>
        </div>
        </section>
		
        <script src="__PUBLIC__/assets/bootstrap/js/jquery-1.11.1.min.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/jquery.datatables.min.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/bootstrap-datetimepicker.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/custom.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/jquery-migrate-1.2.1.min.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/jquery.jqprint-0.3.js"></script>
		<script src="__PUBLIC__/assets/bootstrap/js/hightstock/highstock.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/hightstock/exporting.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/hightstock/highcharts-zh_CN.js"></script>

<script type="text/javascript">
var arr = {$voice_count};  
var CHANNEL_TB;    
var voice_count=new Array();
for(var i=0;i<arr.length;i++)
{
        voice_count[i]= Number(arr[i]);
}

var arr = {$video_count};  
     
var video_count=new Array();
for(var i=0;i<arr.length;i++)
{
        video_count[i]= Number(arr[i]);
}

$(document).ready( function () {
    var canSearch = "{$canSearch}";
	var canAudit = "{$canAudit}";
    if(canSearch == 0 && canAudit == 0){
        $('#alertModel2').modal('show');
        $('.Alertmessage').html('没有查询或审计权限，请联系管理员')
        return;
    }
	$(".tongji-sel").click(function(){  
	   var v = $("#tongji-sel-val").val()
		 if(v==0){
		    $(".tongji-sel").html("列表统计") 
			$(".tongji-sel").css("background-color","#123456")
			$("#tongji-sel-val").val(1) 
			$("#basicTable").css("display","none")
			$("#basicTable_wrapper").css("display","none")
			$(".tongji-show").css("display","block")
		 }else{
		    $(".tongji-sel").html("图形统计")
			$(".tongji-sel").css("background-color","#1FB5AD")
			$("#tongji-sel-val").val(0)  
			$("#basicTable").css("display","")
			//$("#basicTable").addClass("table table-striped table-bordered responsive");
			$("#basicTable_wrapper").css("display","")
			$(".tongji-show").css("display","none")
		}
	}) 
	
	
	$('#container').highcharts({
		title: {
			text: '数据统计'
		},
	   subtitle: {
			text: '各通道录音录像统计'
		},
		xAxis: {
			type: 'category',
			title: {
				text: '通道号'
			},
			min: 0,
			max: 8,
			scrollbar: {
				enabled: true
			},
		   categories: {$channelCat},
			tickLength: 0
		},
	   yAxis: {
			min: 0,
			title: {
				text: '录音/录像记录',
				align: 'high'
			},
			scrollbar: {
				enabled: true
			},
		}, 
		plotOptions: {
			line: {
				 dataLabels: {
					enabled: true
				 },   
				 enableMouseTracking: false
			  }
		},
		exporting: { enabled: false },//隐藏导出图片
		series: [{
			type: 'column',
			name: '录音',
			data: voice_count,
		}, {
			type: 'column',
			name: '录像',
			data: video_count,
		}]
	});
			
			
if(SearchMode == 0){
CHANNEL_TB = $('#basicTable').dataTable(
        {
            "ajax": {  //类似jquery的ajax参数，基本都可以用。
                "type": "post",  //后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                "url": '../record/recordCount',
                "dataSrc": "data",  //默认data，也可以写其他的，格式化table的时候取里面的数据
                "data": function (d) {  //d 是原始的发送给服务器的数据，默认很长。
                    d.datetimepicker_start = $('#datetimepicker_start').val();
                    d.datetimepicker_end = $('#datetimepicker_end').val();
                    d.v_caller = $('#v_caller').val();
                    d.v_called = $('#v_called').val();
                    d.SearchMode = SearchMode;
                   
                    //获取是否是查询,然后置0，0为非搜索查询
                }
            },
        
            "pagingType": "full_numbers",
            //"sPaginationType": "full_numbers", //分页风格，full_number会把所有页码显示出来（大概是，自己尝试）
            "sDom": "<'row-fluid inboxHeader'<'span6'<'dt_actions'>l><'span6'f>r>t<'row-fluid inboxFooter'<'span6'i><'span6'p>>", //待补充
            "iDisplayLength": 12,  //每页显示10条数据
            "bAutoWidth": false,  //宽度是否自动，感觉不好使的时候关掉试试
            "bLengthChange": false,
            "bFilter": false,
            "oLanguage": {  //下面是一些汉语翻译
                "sSearch": "搜索",
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "没有检索到数据",
                "sInfo": "显示 _START_ 至 _END_ 条 &nbsp;&nbsp;共 _TOTAL_ 条",
                "sInfoFiltered": "(筛选自 _MAX_ 条数据)",
                "sInfoEmtpy": "没有数据",
                "sProcessing": "正在加载数据...",
                "oPaginate":
                        {
                            "sFirst": "首页",
                            "sPrevious": "前一页",
                            "sNext": "后一页",
                            "sLast": "末页"
                        }
            },
            "bProcessing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
            "bServerSide": true, //开启服务器模式，使用服务器端处理配置datatable。注意：sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。开启此模式后，你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序（表头）、搜索，这些都会传给服务器相应的值。
//            "sAjaxSource": '__URL__/serach_nasty', //给服务器发请求的url
            "aoColumns": [  //这个属性下的设置会应用到所有列，按顺序没有是空
                {"mData": 'n_channelid'},
				{"mData": 'channelname'},
				{"mData": 'v_caller'},
                {"mData": 'v_called'}, 
                {"mData": 'v_caller'},
                {"mData": 'n_calldirection'},
                {"mData": 'v_voicefile'},
                {"mData": 'd_starttime'},
                {"mData": 'longtime'},
            ],

            "aoColumnDefs": [//和aoColums类似，但他可以给指定列附近属性
                {"bSortable": false, "aTargets": [1, 3, 6, 7]}, //这句话意思是第1,3,6,7,8,9列（从0开始算） 不能排序
                {"bSearchable": false, "aTargets": [1, 2, 3, 4, 5, 6, 7]} //bSearchable 这个属性表示是否可以全局搜索，其实在服务器端分页中是没用的
            ],
            "aaSorting": [[2, "desc"]], //默认排序
            "fnInitComplete": function (oSettings, json) { //表格初始化完成后调用 在这里和服务器分页没关系可以忽略
                $("input[aria-controls='DataTables_Table_0']").attr("placeHolder", "请输入高手用户名");
            }
        });
}
else
{
	CHANNEL_TB = $('#basicTable').dataTable(
	        {
	            "ajax": {  //类似jquery的ajax参数，基本都可以用。
	                "type": "post",  //后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
	                "url": '../record/recordCount',
	                "dataSrc": "data",  //默认data，也可以写其他的，格式化table的时候取里面的数据
	                "data": function (d) {  //d 是原始的发送给服务器的数据，默认很长。
                         d.datetimepicker_start = $('#datetimepicker_start').val();
                         d.datetimepicker_end = $('#datetimepicker_end').val();
                         d.v_caller = $('#v_caller').val();
                         d.v_called = $('#v_called').val();
	                	 d.SearchMode = SearchMode;
	                    //获取是否是查询,然后置0，0为非搜索查询
	                }
	            },
	        
	            "pagingType": "full_numbers",
	            //"sPaginationType": "full_numbers", //分页风格，full_number会把所有页码显示出来（大概是，自己尝试）
	            "sDom": "<'row-fluid inboxHeader'<'span6'<'dt_actions'>l><'span6'f>r>t<'row-fluid inboxFooter'<'span6'i><'span6'p>>", //待补充
	            "iDisplayLength": 12,  //每页显示10条数据
	            "bAutoWidth": false,  //宽度是否自动，感觉不好使的时候关掉试试
	            "bLengthChange": false,
	            "bFilter": false,
	            "oLanguage": {  //下面是一些汉语翻译
	                "sSearch": "搜索",
	                "sLengthMenu": "每页显示 _MENU_ 条记录",
	                "sZeroRecords": "没有检索到数据",
	                "sInfo": "显示 _START_ 至 _END_ 条 &nbsp;&nbsp;共 _TOTAL_ 条",
	                "sInfoFiltered": "(筛选自 _MAX_ 条数据)",
	                "sInfoEmtpy": "没有数据",
	                "sProcessing": "正在加载数据...",
	                "oPaginate":
	                        {
	                            "sFirst": "首页",
	                            "sPrevious": "前一页",
	                            "sNext": "后一页",
	                            "sLast": "末页"
	                        }
	            },
	            "bProcessing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
	            "bServerSide": true, //开启服务器模式，使用服务器端处理配置datatable。注意：sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。开启此模式后，你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序（表头）、搜索，这些都会传给服务器相应的值。
//	            "sAjaxSource": '__URL__/serach_nasty', //给服务器发请求的url
	            "aoColumns": [  //这个属性下的设置会应用到所有列，按顺序没有是空
	                {"mData": 'n_channelid'},
					{"mData": 'channelname'},
	                {"mData": 'camount'},
	                {"mData": 'recordtime'},
	                {"mData": 'vtimes'},
	                {"mData": 'vsecond'}
	            ],

	            "aoColumnDefs": [//和aoColums类似，但他可以给指定列附近属性
	                {"bSortable": false, "aTargets": [1, 3]}, //这句话意思是第1,3,6,7,8,9列（从0开始算） 不能排序
	                {"bSearchable": false, "aTargets": [1, 2, 3]} //bSearchable 这个属性表示是否可以全局搜索，其实在服务器端分页中是没用的
	            ],
	            "aaSorting": [[2, "desc"]], //默认排序
	            "fnInitComplete": function (oSettings, json) { //表格初始化完成后调用 在这里和服务器分页没关系可以忽略
	                $("input[aria-controls='DataTables_Table_0']").attr("placeHolder", "请输入高手用户名");
	            }
	        });
	
}
    
  
 
}) 

$('.search').click(function(){
    var canSearch = "{$canSearch}";
    if(canSearch == 0){
        $('#alertModel2').modal('show');
        $('.Alertmessage').html('没有查询权限，请联系管理员')
        return;
    }
    CHANNEL_TB.fnClearTable();
    CHANNEL_TB.fnReloadAjax();
     
}) 

 jQuery('#datetimepicker_start').datetimepicker.dates['zh'] = {  
        format : "yyyy-mm-dd hh:ii:ss",
        days:       ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],  
        daysShort:  ["日", "一", "二", "三", "四", "五", "六","日"],  
        daysMin:    ["日", "一", "二", "三", "四", "五", "六","日"],  
        months:     ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],  
        monthsShort:  ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],  
        meridiem:    ["上午", "下午"],  
        //suffix:      ["st", "nd", "rd", "th"],  
        today:       "今天"  
}; 

jQuery('#datetimepicker_end').datetimepicker.dates['zh'] = { 
    format : "yyyy-mm-dd hh:ii:ss", 
    days:       ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],  
    daysShort:  ["日", "一", "二", "三", "四", "五", "六","日"],  
    daysMin:    ["日", "一", "二", "三", "四", "五", "六","日"],  
    months:     ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],  
    monthsShort:  ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],  
    meridiem:    ["上午", "下午"],  
    //suffix:      ["st", "nd", "rd", "th"],  
    today:       "今天"  
}; 
        
    jQuery('#datetimepicker_start').datetimepicker({language:'zh'});
    jQuery('#datetimepicker_end').datetimepicker({language:'zh'});

    function dayin(){
       $("#basicTable").jqprint();
    }
	
	


</script>

    </body>
</html>
